<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>团队</title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
	<link href="phoneContent/plugin/mui/css/mui.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="phoneContent/css/style.css" />
	<!-- <link rel="stylesheet" href="phoneContent/css/orgChart.css"> -->
	<link rel="stylesheet" href="phoneContent/css/Team.css">
	<link rel="stylesheet" href="phoneContent/css/Fit.css">
	<style type="text/css">
		.memberInfo_box .mbInfo li span {
			padding: 0 5px;
		}

		#content {
			height: 100%;
			overflow-y: auto;
		}

		.teamwrap .mescroll {
			padding-right: 10px;
			height: calc(100% - 1.8rem) !important;
			background: #211D1E;
		}

		.teamwrap .mui-segmented-control {
			background: #211D1E;
		}

		#teamInfo {
			height: 100vh;
		}

		.level-five-text {
			font-size: 8px !important;
		}
		.body-team {
			position: relative;
		}
		.show-team-detail {
			position: absolute;
			top: 188px;
			left: 10%;
			width: 80%;
			padding-left: 10px;
			padding-top: 50px;
			height: 200px;
			background-color: rgba(0,0,0,0.8);
			border-radius: 4px;
			display: none;
			color: #fff;
		}
		.detail-box {
			display: flex;
			justify-content: center;
			padding: 20px;
		}
	</style>
</head>

<body class="body-team">
	<div class="mui-content teamwrap recordBox" id="content">
		<header class="mui-bar mui-bar-nav bgRed bg_bar noshadow headerTop">
			<h1 class="mui-title">团队</h1>
		</header>
		<div class="sortwrap">
			<div class="sortbox">
				<div class="wrap" id="tree_chart_container">
					<ul class="teamList" id="treeDataList"></ul>
					<!-- <div class="one active level-one"></div>
					<div class="one active level-two"></div>
					<div class="one active level-three"></div> -->
					<!-- <div class="line_zs"><span
						class="line3"></span><span class="line2"></span>
							<span class="line1"></span></div>
					<div class="line_two level-four">
						<div class="two"></div>
						<div class="two"></div>
						<div class="two"></div>
					</div> -->
					<!-- <div class="line_zsbox">
						<div class="line_zs"> <span
							class="line3"></span><span class="line2"></span> <span class="line1"></span></div>
						<div class="line_zs"> <span
							class="line3"></span><span class="line2"></span> <span class="line1"></span></div>
						<div class="line_zs"> <span
							class="line3"></span><span class="line2"></span> <span class="line1"></span></div>
					</div> -->
					<!-- <div class="line_other level-next level-five">
						<div class="other level-five-text">A1</div>
						<div class="other level-five-text">A2</div>
						<div class="other level-five-text">A3</div>
						<div class="other level-five-text">A4</div>
						<div class="other level-five-text">A5</div>
						<div class="other level-five-text">A6</div>
						<div class="other level-five-text">A7</div>
						<div class="other level-five-text">A8</div>
						<div class="other level-five-text">A9</div>
					</div> -->
				</div>
			</div>
		</div>
		<div class="mui-segmented-control">
			<a style="font-size:1em" class="mui-control-item mui-active" href="#item1">
				团队成员
			</a>
		</div>
		<div style="padding: 0 10px 20px 10px;">
			<div class="line_other level-next other-next-container not-top-line" style="display: none;">
				<div class="other other-next">
					<span class="cache-value" style="display: none;">1</span>
					<span class="text"></span>
				</div>
				<div class="other other-next">
					<span class="cache-value" style="display: none;">4</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="7">
					<span class="cache-value" style="display: none;">7</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="2">
					<span class="cache-value" style="display: none;">2</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="5">
					<span class="cache-value" style="display: none;">5</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="8">
					<span class="cache-value" style="display: none;">8</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="3">
					<span class="cache-value" style="display: none;">3</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="6">
					<span class="cache-value" style="display: none;">6</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="9">
					<span class="cache-value" style="display: none;">9</span>
					<span class="text"></span>
				</div>
			</div>
			<div class="line_other level-next other-next-container" style="display: none;">
				<div class="other other-next" data-value="10">
					<span class="cache-value" style="display: none;">10</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="13">
					<span class="cache-value" style="display: none;">13</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="16">
					<span class="cache-value" style="display: none;">16</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="11">
					<span class="cache-value" style="display: none;">11</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="14">
					<span class="cache-value" style="display: none;">14</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="17">
					<span class="cache-value" style="display: none;">17</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="12">
					<span class="cache-value" style="display: none;">12</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="15">
					<span class="cache-value" style="display: none;">15</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="18">
					<span class="cache-value" style="display: none;">18</span>
					<span class="text"></span>
				</div>
			</div>
			<div class="line_other level-next other-next-container" style="display: none;">
				<div class="other other-next" data-value="19">
					<span class="cache-value" style="display: none;">19</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="22">
					<span class="cache-value" style="display: none;">22</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="25">
					<span class="cache-value" style="display: none;">25</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="20">
					<span class="cache-value" style="display: none;">20</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="23">
					<span class="cache-value" style="display: none;">23</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="26">
					<span class="cache-value" style="display: none;">26</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="21">
					<span class="cache-value" style="display: none;">21</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="24">
					<span class="cache-value" style="display: none;">24</span>
					<span class="text"></span>
				</div>
				<div class="other other-next" data-value="27">
					<span class="cache-value" style="display: none;">27</span>
					<span class="text"></span>
				</div>
			</div>
		</div>
		<div id="item1" class="mui-control-content mui-active mescroll">
			<ul class="teamList" id="dataList"></ul>
		</div>
		<div id="item2" class="mui-control-content mescroll">
			<ul class="teamList teamList1" id="dataList1">
				<li>
					<div class="flex">
						<img src="phoneContent/img/headImg.png" />
						<div class="fr">
							<p class="t_name"></p>
							<p class="t_id">ID：dong3889</p>
						</div>
					</div>
					<div class=" fr fr_fr">
						<p class="t_name">+287</p>
						<p class="t_id">2020-12-28 12:30:30</p>
					</div>
				</li>
			</ul>
		</div>
	</div>

	<div style="height:50px; background: #211D1E;"></div>
	<input type="hidden" class="tabShow" name="" id="" value="1" placeholder="导航索引" />
	<div class="show-team-detail" id="showTeamDetail">
		<div class="detail-box">
			<span>姓名：</span><span id="detailUserName"></span>
		</div>
		<div class="detail-box">
			<span>手机号：</span><span id="detailMobile"></span>
		</div>
	</div>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script src="phoneContent/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="phoneContent/plugin/mui/js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="phoneContent/js/foot.js"></script>
	<script src="phoneContent/js/appcontent.js"></script>
	<script src="phoneContent/js/Fit.js"></script>
	<!-- <script src="phoneContent/js/mockData.js"></script> -->
	<!-- <script src="phoneContent/js/orgChart.min.js"></script> -->
	<script src="page-js/Team.js"></script>
</body>

</html>